<!--
  -- 描述：机构类型下拉树列表，可以用v-model双向绑定数据
  --
  -- 作者：cyq
  -- 时间：2018/9/1 12:39
-->
<template>
  <el-popover
    placement="bottom-start"
    trigger="click"
    v-model="opened">
    <el-tree ref="tree" :data="list" node-key="id" :props="{label: 'text', children: 'children'}"
             @current-change="selectHandler">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>&nbsp;<span class="text-danger">{{ data.available===0?'[禁用]':'' }}</span>
      </span>
    </el-tree>
    <el-input
      slot="reference"
      placeholder="选择机构类型"
      suffix-icon="el-icon-arrow-down"
      :value="text"
      :readonly="true">
    </el-input>
  </el-popover>
</template>

<script>
    export default {
      name: "OrgSelect",
      model: {
        prop: 'mval',
        event: 'modelValue'
      },
      props: ['mval'],
      watch: {
        mval: {
          handler() {
            this.defaultCheck();
          },
          deep: true
        }
      },
      mounted: function() {
        this.api.post('/bucket-system/system/dict/all', {code: 'jglx'})
          .then((data) => {
            this.list = data.data;
          });
      },
      updated: function() {
        this.defaultCheck();
      },
      data() {
        return {
          list: [],
          opened: false,
          text: ''
        }
      },
      methods: {
        defaultCheck() {
          if(this.mval){
            this.$refs.tree.setCurrentKey(this.mval);
            this.text = this.$refs.tree.getCurrentNode().text;
          }else {
            this.$refs.tree.setCurrentKey(null);
            this.text = '';
          }
        },
        inputHandler: function(val){
          this.$emit('modelValue', val)
        },
        selectHandler: function(obj, node, tree){
          this.text = obj.text;
          this.inputHandler(obj.id);
          this.opened = false;
        }
      }
    }
</script>
